<template>
	<view class="orderDetails">
		<view class="inner">
			<view class="card-1 card">
				<!-- 1待付款  2带配送 3待提货 4已提货 5退款 -->
				<view class="lbox">
					<text>{{ info.status_info }}</text>
					<view class="text2" v-if="info.status == 1 && xindanshijian > 0">
						订单将于
						<u-count-down :time="xindanshijian1" format="HH小时mm分ss秒 "></u-count-down>
						后自动关闭
					</view>
					<view class="text2" v-if="info.status == 3 && xindanshijian > 0">
						订单将于
						<u-count-down :time="xindanshijian" format="HH小时mm分ss秒 "></u-count-down>
						后自动收货
					</view>
				</view>
				<view class="rbox">
					<image v-if="info.status === 1 || info.status === -5" src="../../static/images/xq00.png" mode="aspectFit"></image>
					<image v-if="info.status === 2" src="../../static/images/xq01.png" mode="aspectFit"></image>
					<image v-if="info.status === 3" src="../../static/images/xq02.png" mode="aspectFit"></image>
					<image v-if="info.status === 4" src="../../static/images/xq03.png" mode="aspectFit"></image>
					<image v-if="info.status === 5" src="../../static/images/xq04.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="card-2 card">
				<view class="info">
					<text>收货人：</text>
					<text>{{ info.shouhuo_info.name }} {{ info.shouhuo_info.phone }}</text>
				</view>
				<view class="info">
					<text>收货地址：</text>
					<text>{{ info.shouhuo_info.address }}</text>
				</view>
			</view>
			<view class="card-3 card" v-for="(item, index) in info.goods_info" :key="index">
				<view class="info info-other">
					<text>{{ item.info.title }}</text>
					<text>{{ info.goods_type_desc }}</text>
					<text>{{ info.take_type_desc }}</text>
				</view>
				<view class="info">
					<text>{{ item.info.en_title }}</text>
				</view>
				<view class="info">
					<text>重量(KG)</text>
					<text>{{ item.weight }}KG</text>
				</view>
			</view>
			<view class="card-4 card">
				<view class="card-title">商品详情</view>
				<view class="goodsbox">
					<view
						class="item"
						v-for="(value, index) in info.products"
						:key="index"
						@click="toNav(`goods/goodsDetail?id=${value.id}&inventoryId=${value.id}&num=${value.num}`)"
					>
						<image :src="value.image" mode=""></image>
						<view class="card-4-info">
							<view class="row">
								<text>{{ value.title }}</text>
								<text>{{ value.key_vals }}</text>
							</view>
							<view class="row2">
								<text>￥{{ value.price_sale }}</text>
								<text>X{{ value.num }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="card-5 card">
				<view class="card-title">价格明细</view>
				<view class="info">
					<text>商品总价</text>
					<text>共{{ summation() }}件商品</text>
					<text>￥{{ info.price }}</text>
				</view>
				<view class="info">
					<text>配送费</text>
					<text>满100免配送费</text>
					<text v-if="info.yunfei">￥{{ info.yunfei }}</text>
					<text v-else>免运费</text>
				</view>
				<view class="info">
					<text>优惠券</text>
					<text></text>
					<text v-if="info.pay_info.yhq">-￥{{ info.pay_info.yhq || 0 }}</text>
					<text v-else>无</text>
				</view>
				<u-divider></u-divider>
				<view class="total_pay">
					<text>合计：</text>
					<text>{{ info.price }}</text>
				</view>
			</view>
			<view class="card-6 card">
				<view class="card-title">订单信息</view>
				<view class="info" @click="j_copy(info.order_id)">
					<text>订单编号：</text>
					<text>{{ info.order_id }}</text>
					<view class="copy-box">
						<image src="@/static/images/copy.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="info">
					<text>下单时间：</text>
					<text>{{ info.dtTime }}</text>
				</view>
				<view class="info">
					<text>配送方式：</text>
					<text v-if="info.peisong_type == 1 && info.status != 4">自提</text>
					<text v-else-if="info.peisong_type == 1 && info.status == 4">自提 （自提码：{{ info.shequ.tihuoma }} ）</text>
					<text v-else-if="info.peisong_type == 2">社区配送</text>
					<text v-else="">快递</text>
				</view>
				<view class="info">
					<text>订单备注：</text>
					<text>{{ info.remark || '无' }}</text>
				</view>
			</view>

			<view class="card card-7">
				<text>支付方式</text>
				<view class="rbox">
					<image v-if="info.pay_info.yue" src="@/static/images/yue.png" mode="aspectFit"></image>
					<image v-else src="@/static/images/wechat.png" mode="aspectFit"></image>
					<text v-if="info.pay_info.weixin && info.pay_info.yue">微信支付+积分支付</text>
					<text v-else-if="info.pay_info.weixin">微信支付</text>
					<text v-else-if="info.pay_info.yue">余额支付</text>
					<text v-else>微信支付</text>
				</view>
			</view>
			<view v-if="info.status >= 3" class="card-8 card">
				<view class="card-title">物流信息</view>
				<view class="info" @click="j_copy(info.fahuo_info.order_id)">
					<text>物流单号</text>
					<text style="margin-right: 50rpx">{{ info.fahuo_info.order_id }}</text>
					<view class="copy-box">
						<image src="@/static/images/copy.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="info">
					<text>承运物流</text>
					<text>{{ info.fahuo_info.company }}</text>
				</view>
				<!-- <view class="info" >
					<text>物流电话</text>
					<text>{{ info.take_phone }}</text>
				</view> -->
				<!-- <u-read-more showHeight="100" toggle textIndent="0" openText="收起" close-text="展开" color="#333333"> -->
					<view class="more-box" :class="{iszk}">
						
						<view class="toggle-btn" @click="toggle()">
							<block v-if="!iszk">
								<text>展开</text>
								<u-icon name="arrow-down"></u-icon>
							</block>
							<block v-else>
								<text>收起</text>
								<u-icon name="arrow-up"></u-icon>
							</block>
						</view>
						
						<view class="steps-box" v-if="express.Traces.length > 0">
							<u-steps :current="express.Traces.length" direction="column" activeColor="#CF2025" inactiveColor="">
								<u-steps-item :title="item.AcceptStation" :desc="item.AcceptTime" v-for="(item, index) in express.Traces" :key="index"></u-steps-item>
							</u-steps>
						</view>
					</view>
				<!-- </u-read-more> -->
			</view>
			<u-loading-page :loading="loading"></u-loading-page>
		</view>
		<u-modal :show="qx_modal" title="确定取消该订单吗？" @close="modal = false" :closeOnClickOverlay="true">
			<view class="u-modal-btnbox" slot="confirmButton">
				<button @click="qx_modal = false">取消</button>
				<button @click="qx_order">确认</button>
			</view>
		</u-modal>
		<shpop :info="info" :orderId="id" :show="shpop" @close="shpop = false"></shpop>

		<kefupop v-if="info.status >= 3" text="在线客服" :show="kfpop" @close="kfpop = false"></kefupop>
		<footer-btn v-if="info.status === 1 || info.status == -5" @submit="submit" twoBtn round="40" oneText="取消订单" twoText="去付款"></footer-btn>
		<!-- info.status === 2 -->
		<footer-btn v-if="info.status === 2" round="40" text="取消订单" @submit="clickSqsh"></footer-btn>
		<!-- if_shouhou  等于1是可以售后的  等于0是不可以售后的 -->
		<footer-btn v-if="info.status === 3" twoBtn round="40" oneText="申请售后" twoText="确认收货" @submit="submit2"></footer-btn>

		<footer-btn v-if="info.status === 4" twoBtn round="40" oneText="申请售后" twoText="前往评论" text="前往评论" @submit="submit3"></footer-btn>
		<!-- <footer-btn v-if="info.status > 1" round="40" text="申请售后" @submit="clickSqsh"></footer-btn> -->
	</view>
</template>

<script>
import API from '@/common/api';
export default {
	name: 'orderDetails',
	data() {
		return {
			id: '',
			kfpop: true,
			loading: true,
			qx_modal: false,
			shpop: false,
			info: { shouhuo_info: {}, pay_info: {}, fahuo_info: {}, products: [] },
			form: {},
			express: { Traces: [] },
			index_config: {},
			xindanshijian: '',
			xindanshijian1: '',
			iszk:false,
		};
	},
	computed: {
		summation() {
			return (key, i = 0) => {
				if (this.info.products.length > 0) {
					if (key === 'price') {
						return this.info.products
							.reduce((total, current) => {
								return total + parseFloat(current[key]) * parseFloat(current['num']);
							}, 0)
							.toFixed(i);
					} else {
						return this.info.products
							.reduce((total, current) => {
								return total + parseFloat(current['num']);
							}, 0)
							.toFixed(i);
					}
				} else {
					return 0;
				}
			};
		}
	},
	onLoad(data) {
		// 93 95
		this.id = data.id;
		this.init();
	},
	methods: {
		toggle(){
			this.iszk = !this.iszk;
		},
		clickSqsh() {
			this.qx_modal = true;
		},
		
		init() {
			this.loading = true;
			this.$http.getJson('orders_detail', { id: this.id }).then((res) => {
				this.loading = false;
				if (res.code == 1) {
					try {
						res.data.shequ.image = this.empty(res.data.shequ.image) ? 1 : res.data.shequ.image;
						res.data.price_all = (Number(res.data.price) - Number(res.data.yunfei)).toFixed(2);
					} catch (e) {
						//TODO handle the exception
					}

					this.info = res.data;
					this.info.price_need_pay = this.info.price_need_pay.toFixed(2);

					if (res.data.status >= 3) {
						if (res.data.fahuo_info.fahuo_id == 1001) {
							this.msg('暂无轨迹信息');
							return;
						}

						this.express_getInfo(res.data.fahuo_info.fahuo_id);
					}

					if (res.data.status == -5 || res.data.status == 3) {
						this.get_config();
					}
				}
			});
		},
		get_config() {
			this.$http.getJson('index_config', {}).then((res) => {
				this.index_config = res.data;
				//确认收货倒计时时间
				if (this.info.fahuo_info) {
					this.xindanshijian = this.get_timestamp(this.info.fahuo_info.fahuo_time) + this.index_config.time_shouhuo * 24 * 60 * 60 * 1000 - this.get_timestamp();
				}
				//待付款自动关闭时间
				this.xindanshijian1 = this.get_timestamp(this.info.dtTime) + this.index_config.time_pay * 60 - this.get_timestamp();
				this.xindanshijian1 = this.xindanshijian1 * 1000;
			});
		},

		submit3(flag) {
			switch (flag) {
				case 1:
					// 售后
					this.shpop = true;
					break;
				case 2:
					this.toNav(`pinglun/pinglun?id=${this.id}`);
					break;
				default:
					break;
			}
			return;
		},
		submit2(flag) {
			switch (flag) {
				case 1:
					// 售后
					this.shpop = true;
					break;
				case 2:
					//拉起确认收货组件

					if (this.info.transaction_id) {
						uni.showLoading({
							title: '加载中',
							mask: true
						});

						if (wx.openBusinessView) {
							uni.setStorageSync('tempItemID', this.id);
							wx.openBusinessView({
								businessType: 'weappOrderConfirm',
								extraData: {
									transaction_id: this.info.transaction_id
								},
								success: (res) => {
									console.log(res.extraData.status, 'successextraData');
									if (res.extraData.status == 'success') {
										console.log('status--success');
										this.qr_shouhuo();
									}
									if (res.extraData.status == 'cancel') {
										console.log('status--cancel');
										this.msg('已取消');
									}
									if (res.extraData.status == 'fail') {
										console.log('status--fail');
										this.msg('确认收货失败');
									}
								},
								fail: (err) => {
									//dosomething
									console.log(err, 'fail');
								},
								complete: () => {
									//dosomething
									uni.hideLoading();
									console.log('complete');
								}
							});
						} else {
							//引导用户升级微信版本
							uni.showToast({
								title: '您的微信版本过低，请升级微信版本',
								icon: 'none'
							});
						}
					} else {
						uni.showModal({
							title: '确定到货了吗',
							success: (res) => {
								if (res.confirm) {
									this.qr_shouhuo();
								}
							}
						});
					}
					break;
				default:
					break;
			}
			//
			return;
		},
		submit(flag) {
			switch (flag) {
				case 1:
					// 取消订单

					this.qx_modal = true;
					break;
				case 2:
					// 去付款
					this.pay_order(this.id);
					break;
				default:
					// 确认收货
					break;
			}
			//
			return;
		},
		pay_order(order_id) {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			API.getJson('orders_wxPay', { order_id }).then((res) => {
				uni.hideLoading();
				const { code, data, message } = res;
				if (code === 1) {
					API.wx_pay(data).then((res) => {
						this.toNav(`paysuccess/paysuccess?id=${order_id}`);
					});
				} else {
					this.msg(message);
				}
			});
		},
		qr_shouhuo() {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			this.$http.getJson('orders_qrshouhuo', { order_id: this.id }).then((res) => {
				uni.hideLoading();
				if (res.code == 1) {
					this.init();
					this.msg('确认收货成功');
				} else {
					this.msg(res.message);
				}
			});
		},
		qx_order() {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			this.$http
				.getJson('orders_qxOrder', {
					order_id: this.id
				})
				.then((res) => {
					uni.hideLoading();
					if (res.code == 1) {
						this.info.status = -1;
						this.info.statusInfo = '订单已取消';
						uni.showToast({title: res.message});
						this.qx_modal = false;
					} else {
						this.msg(res.message)
					}
				});
		},

		express_getInfo(fahuo_id) {
			uni.showLoading({
				title: '加载中...'
			});
			this.$http.getJson('express_getInfo', { fahuo_id }).then((res) => {
				const { code, data, message } = res;
				uni.hideLoading();
				if (code == 1) {
					this.express = data;
					if (!data.Success) {
						this.msg(res.data.Reason);
					}
				} else {
					this.msg(message);
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.orderDetails {
	.iszk{
		height: auto !important;
		
	}
	.more-box{
		position: relative;
		height: 400rpx;
		overflow: hidden;
		.toggle-btn{
			position: absolute;
			bottom: 0rpx;
			z-index: 109;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			height: 88rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0,0,0,0.06);
			.j-active();
			text{
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
			}
		}
	}
	
	.inner {
		padding: 24rpx;
		.card + .card {
			margin-top: 16rpx;
		}
		.card {
			padding: 24rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			background: #ffffff;
			.card-title {
				padding-bottom: 20rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #000000;
			}
		}

		.info + .info {
			margin-top: 20rpx;
		}
		.info {
			position: relative;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #000000;
			text:nth-of-type(1) {
				width: 130rpx;
				font-weight: bold;
			}
			text:nth-of-type(2) {
				// .bor();
				flex: 1;
				color: #666666;
			}
			text:nth-of-type(3) {
				margin-top: 12rpx;
				font-size: 20rpx;
				color: #222222;
			}
			.copy-box {
				.fix-c-y();
				right: 0;
				width: 32rpx;
				height: 32rpx;
				.j-active();
				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		.info-other {
			display: block;
			text:nth-of-type(1) {
				font-weight: bold;
				margin-right: 40rpx;
			}
			text:nth-of-type(2) {
				color: #cf2025;
			}
			text:nth-of-type(3) {
				float: right;
			}
		}
		.card-1 {
			display: flex;
			align-items: center;
			padding: 34rpx;
			.lbox {
				flex: 1;
				display: flex;
				justify-content: center;
				flex-direction: column;
				text:nth-of-type(1) {
					font-size: 28rpx;
					font-weight: bold;
					color: #000000;
				}
				.text2 {
					display: flex;
					align-items: center;
					margin-top: 12rpx;
					font-size: 20rpx;
					color: #666666;
				}
			}
			.rbox {
				display: flex;
				image {
					width: 72rpx;
					height: 64rpx;
				}
			}
		}
		.card-2 {
			.info {
				align-items: flex-start;
				text:nth-of-type(2) {
					color: #000000;
				}
			}
		}

		.card-4 {
			.goodsbox {
				.item + .item {
					margin-top: 16rpx;
				}
				.item {
					display: flex;
					& > image {
						width: 144rpx;
						height: 144rpx;
						background: #f8f8f8;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
					}
					.card-4-info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 24rpx;
						& > .row {
							flex: 1;
							width: 100%;
							display: flex;
							flex-direction: column;
							text:nth-of-type(1) {
								font-size: 28rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
								color: #000000;
							}
							text:nth-of-type(2) {
								margin-top: 8rpx;
								font-size: 20rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
							}
						}
						.row2 {
							.flex-between();
							text:nth-of-type(1) {
								font-size: 28rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
								color: #000000;
							}
							text:nth-of-type(2) {
								font-size: 24rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
								color: #000000;
							}
						}
					}
				}
			}
		}
		.card-5 {
			// .clearFix();
			.total_pay {
				// float: right;
				.flex-between();
				text:nth-of-type(1) {
					font-size: 24rpx;
					color: #222222;
				}
				text:nth-of-type(2) {
					font-size: 36rpx;
					color: #ff0000;
					&:before {
						content: '￥';
						font-size: 28rpx;
						color: #ff0000;
					}
				}
			}
		}
		.card-6 {
			.info {
				display: block;
				text:nth-of-type(1) {
					width: 130rpx;
					font-weight: bold;
				}
			}
		}
		.card-7 {
			height: 108rpx;
			.flex-between();
			& > text {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #222222;
			}

			.rbox {
				display: flex;
				align-items: center;
				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 24rpx;
				}
				& > text {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
				}
			}
		}
		.card-8 {
			.info {
				text:nth-of-type(1) {
					color: #222222;
					font-weight: bold;
				}
				text:nth-of-type(2) {
					flex: 1;
					text-align: right;
				}
			}
			.steps-box {
				padding-top: 44rpx;
				padding-bottom: 30px;
				// clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
			}
		}
	}
}
</style>
